<template>
  <el-card>
    <el-input class="width200" placeholder="用户名" v-model="user_name" clearable></el-input>
    <el-button type="primary" @click="searchList">查询订单</el-button>
    <el-button type="primary" @click="addorder">新增订单</el-button>
    <el-table :data="tableData" stripe border style="margin-top: 20px">
      <el-table-column prop="_add_time_str" label="申请时间" width="110">
      </el-table-column>
      <!-- 申请人电话  购买记录  释放记录  提现记录   账户余额 -->
      <el-table-column prop="mobile" label="申请人电话" width="110">
        <template slot-scope="scope">
          <el-link type="primary" @click="showInfo(scope.row.user_id)">{{scope.row.mobile}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="withdraw_money" label="提现金额" width="80">
      </el-table-column>
      <el-table-column prop="withdraw_type" label="转账方式" width="80">
      </el-table-column>
      <el-table-column prop="wx_pay" label="微信号" width="80">
      </el-table-column>
      <el-table-column prop="ali_pay" label="支付宝号" width="80">
      </el-table-column>
      <el-table-column  label="银行转账">
        <template slot-scope="scope">
          <div>账户名称：{{scope.row.card_bank}}</div>
          <div>账户号码：{{scope.row.card_num}}</div>
          <div>持卡人姓名：{{scope.row.card_name}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="images" label="转帐图片" width="80">
        <template slot-scope="scope">
          <image :src="scope.row.image" style="width: 30px;height: 30px;cursor: pointer"
            @click="preview(scope.row.image)" />
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="拒绝原因">
      </el-table-column>
      <el-table-column prop="images" label="状态" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.status == 1 ? '申请中':scope.row.status == 2 ?'申请通过': '申请拒绝'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status== 1" size="mini" @click="handleRefuse(scope.$index, scope.row)">拒绝</el-button>
          <el-button  v-if="scope.row.status== 1" size="mini" type="success" @click="handleSuccess(scope.$index, scope.row)">通过</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="isorder" :close-on-click-modal="true" width="60%">
      <el-form ref="form" :model="order" label-width="80px">
        <el-form-item label="申请人">
          <el-input class="width400" v-model="order.user_name"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input class="width400" v-model="order.mobile"></el-input>
        </el-form-item>
        <el-form-item label="申请金额">
          <el-input class="width400" v-model="order.amount"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="isJudge" :close-on-click-modal="true" width="60%">
      <el-form ref="form" :model="order" label-width="80px">
        <el-form-item label="转账图片" v-if="isEdit == 1">
          <vk-data-upload v-model="order.image" :limit="1"></vk-data-upload>
        </el-form-item>
        <el-form-item label="驳回原因" v-if="isEdit==2">
          <el-input class="width400" v-model="order.reason"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="isPreview" :close-on-click-modal="true" width="60%">
      <div style="text-align: center;">
        <image :src="url" />
      </div>
    </el-dialog>
    <el-dialog :visible.sync="isWithdraw" :close-on-click-modal="true" width="60%">
      <div>用户名： <text style="font-weight: 500;color: #f00;font-size: 20px">{{userInfo.mobile}} </text>
       <text style="margin-left: 20px">当前账户积分：<text style="font-weight: 500;color: #f00;font-size: 20px">{{userInfo.balance}}</text></text> 
       <text style="margin-left: 20px">流水：<text style="font-weight: 500;color: #f00;font-size: 20px">{{userInfo.water_amount}}</text></text></div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="提现记录" name="first">
          <el-table :data="withdrawList" stripe border style="margin-top: 20px">
            <el-table-column prop="_add_time_str" label="申请时间">
            </el-table-column>
            <el-table-column prop="withdraw_money" label="提现金额" >
            </el-table-column>
            <el-table-column prop="withdraw_type" label="转账方式" >
            </el-table-column>
            <el-table-column prop="reason" label="拒绝原因">
            </el-table-column>
            <el-table-column prop="images" label="状态" >
              <template slot-scope="scope">
                <span>{{scope.row.status == 1 ? '申请中':scope.row.status == 2 ?'申请通过': '申请拒绝'}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
          <el-tab-pane label="购买记录" name="second">
            <el-table :data="buyList" stripe border style="margin-top: 20px">
              <el-table-column prop="sign_name" label="签约姓名">
              </el-table-column>
              <el-table-column prop="_add_time_str" label="签约时间">
              </el-table-column>
              <el-table-column prop="coupon_name" label="关联券包">
              </el-table-column>
              <el-table-column prop="stock" label="签约数量">
              </el-table-column>
              <el-table-column prop="price" label="签约价格">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="释放记录" name="third">
            <el-table :data="backList" stripe border style="margin-top: 20px">
              <el-table-column prop="_add_time_str" label="释放时间">
              </el-table-column>
              <el-table-column prop="msg" label="内容">
              </el-table-column>
              <el-table-column prop="amount" label="积分">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
    </el-dialog>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'first',
        user_name: '',
        order: {
          status: 1
        },
        isPreview: false,
        url: '',
        currentPage: 1,
        pageNum: 1,
        pageSize: 100,
        total: 0,
        isorder: false,
        tableData: [],
        isEdit: 1,
        isJudge: false,
        isWithdraw: false,
        userInfo: {},
        buyList: [], // 购买记录
        backList: [], // 释放记录
        withdrawList: [] // 提现记
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      async handleClick(tab, event) {
        console.log(tab.index)
        if (tab.index == 0) {
          let res3 = await vk.callFunction({
            url: 'user/kh/withdrawAllget',
            title: '加载中...',
            data: {
              user_id: this.userInfo._id,
            },
          })
          this.withdrawList = res3.rows
        }
        if (tab.index == 1) {
          let res1 = await vk.callFunction({
            url: 'user/kh/contractAllget',
            title: '加载中...',
            data: {
              user_id: this.userInfo._id,
            },
          })
          this.buyList = res1.rows
          
        }
        if (tab.index == 2) {
          let res2 = await vk.callFunction({
            url: 'user/kh/messageAllget',
            title: '加载中...',
            data: {
              user_id: this.userInfo._id,
              type: 1
            },
          })
          this.backList = res2.rows
        }
      },
      async showInfo(user_id){
        this.isWithdraw = true
        let info = await vk.callFunction({
          url: 'user/kh/getUserInfoById',
          title: '加载中...',
          data: {
            user_id
          },
        })
        this.userInfo = info.userInfo
        // 根据id查所有合同   
        
        
        let res3 = await vk.callFunction({
          url: 'user/kh/withdrawAllget',
          title: '加载中...',
          data: {
            user_id: this.userInfo._id,
          },
        })
        this.withdrawList = res3.rows
      },
      returnDate(date) {
        return vk.pubfn.timeFormat(date,"yyyy-MM-dd hh:mm:ss");
      },
      preview(item) {
        this.url = item
        this.isPreview = true
      },
      addorder() {
        this.isorder = true
        this.order = {
          status: 1
        }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val
        this.getList()
      },
      handleRefuse(index, row) {
        this.order = row
        this.isJudge =true
        this.isEdit = 2
      },
      handleSuccess(index, row) {
        this.order = row
        this.isJudge =true
        this.isEdit = 1
      },
      handleEdit(index, row) {
        this.order = row
        this.isorder = true
      },
      handleDelete(index, row) {
        vk.confirm('确定要删除该商品吗', '提示', '确定', '取消', res => {
          if (res.confirm) {
            this.orderDelete(row)
          }
        });
      },
      orderDelete(row) {
        vk.callFunction({
          url: 'user/kh/withdrawDelete',
          title: '加载中...',
          data: {
            _id: row._id
          },
          success: (res) => {
            if (res) {
              this.getList()
            }
          }
        })
      },
      searchList() {
        this.pageNum = 1
        this.getList()
      },
      getList() {
        uni.showLoading({
          title: '加载中...'
        })
        let obj = {}
        if (this.user_name) {
          obj.user_name = this.user_name
        }
        vk.callFunction({
          url: 'user/kh/withdrawList',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ...obj
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.tableData = res.rows
              this.total = res.total
            }
          }
        })
      },
      async onSubmit() {
        if(this.isEdit== 1) {
          this.order.status = 2
        }
        if(this.isEdit== 2) {
          this.order.status = 3
        }
        vk.callFunction({
          url: 'user/kh/withdrawPost',
          title: '加载中...',
          data: this.order,
          success: (res) => {
            if (res) {
               this.isJudge = false
              this.getList()
            }
          }
        })
        // 发送订阅消息
        await vk.callFunction({
          url: 'template/openapi/weixin/pub/sendMessage',
          data: {
            touser : this.order.openid,
            // touser: "ozCkP5dUWOaagEbS2boFSaS1TGoE",
            template_id : "L7rMKZBNmirvpJzr_N0qEJrZUoh_vBPs8Ub2jsZKT7k",
            page : "pages/withdraw/withdraw",
            obj : {
              phrase1:{
                value: this.isEdit== 1?'成功':'拒绝'
              },
              date3:{
                value: vk.pubfn.timeFormat(new Date(),"yyyy-MM-dd hh:mm:ss")
              },
              thing5:{
                value: this.isEdit== 1?'您的申请已通过，请点击查看详情':'您的申请已被拒绝，请点击查看详情'
              },
              thing2:{
                value:"提现申请"
              },
              time17:{
                value: this.order._add_time_str
              }
            },
            miniprogram_state : "trial",
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__new-tab {
    margin-right: 12px !important
  }

  .width400 {
    width: 400px
  }

  .width200 {
    width: 200px
  }

  .width100 {
    width: 100px
  }

  .good {
    display: flex;
    align-items: center;
    margin-top: 10px;

    &-img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }

    &-name {
      margin-left: 10px;
    }

    &-price {
      color: #f56c6c;
      font-weight: 500;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>